<template>
  <div @click="hideEmotionBox">
    <div class="robot-wrapper">
      <div class="robot-top">
        <a href="javascript:void(0)" class="logo"><img src="../assets/images/logo.png"/></a>
        <span class="close" @click="clickClose"><img src="../assets/images/close.png"/></span>
        <ul>
          <li>
            <router-link :to="{path:'/panoramicList',query:{category: '按钮', title: '我的合规清单'}}" target="_blank">
              <img src="../assets/images/wode.png"/>我的合规责任
            </router-link>
          </li>
          <li>
            <router-link :to="{path:'/panoramicList',query:{category: '按钮', title: '合规风险全景图'}}" target="_blank">
              <img src="../assets/images/zeren.png"/>所有合规责任
            </router-link>
          </li>
          <li>
            <a :href="artificialUrl" target="_blank">
              <img src="../assets/images/fuwu.png"/>人工服务
            </a>
          </li>
          <li>
            <a href="javascript:void(0)" @click="yhjy_open">
              <i class="iconfont icon-jianyifankui"></i>意见建议
            </a>
          </li>
          <template v-for="userAuth in userAuths" class="fr">
            <li v-if="userAuth.name==='我的关注'">
              <a :data-id="userAuth.id" target="_blank" :href="userAuth.scriptUrls">
                <i class="iconfont icon-wodeguanzhu"></i>我的关注
              </a>
            </li>
            <li v-else-if="userAuth.name==='我的足迹'">
              <a :data-id="userAuth.id" target="_blank" :href="userAuth.scriptUrls">
                <i class="iconfont icon-jindu"></i>我的足迹
              </a>
            </li>
          </template>
        </ul>
      </div>
      <div class="content-box">
        <!--左导航栏-->
        <div class="robot-left-nav">
          <ul>
            <li :class="[{'active':leftPanel === 'serve'}]">
              <a @click="leftPanel = 'serve'" href="javascript:void(0)">
                <i class="iconfont icon-falvfuwu"></i>
                <p>法律服务</p>
              </a>
            </li>
            <li :class="[{'active':leftPanel === 'consult'}]">
              <a @click="leftPanel = 'consult'" href="javascript:void(0)">
                <i class="iconfont icon-duihua"></i>
                <p>法律智答</p>
              </a>
            </li>
            <li :class="[{'active':leftPanel === 'search'}]">
              <a @click="leftPanel = 'search'" href="javascript:void(0)">
                <i class="iconfont icon-zhinengsousuo"></i>
                <p>资信智查</p>
              </a>
            </li>
<!--  此处暂时隐藏             <li :class="[{'active':leftPanel === 'approval'}]">
              <a @click="leftPanel = 'approval'" href="javascript:void(0)">
                <i class="iconfont icon-shenhe"></i>
                <p>法律审核</p>
              </a>
            </li>
            <li :class="[{'active':leftPanel === 'preach'}]">
              <a @click="leftPanel = 'preach'" href="javascript:void(0)">
                <i class="iconfont icon-xuanchuan"></i>
                <p>法律宣讲</p>
              </a>
            </li>-->
            <li>
              <a :href="adSearchUrl" target="_blank">
                <i class="advertisingReview"></i>
                <p>广告智审</p>
              </a>
            </li>
            <li>
              <a :href="policyLibraryUrl" target="_blank">
                <i class="policyLibrary"></i>
                <p>法律政策库</p>
              </a>
            </li>
            <li>
              <a :href="caseLibraryUrl" target="_blank">
                <i class="caseLibrary"></i>
                <p>典型案例库</p>
              </a>
            </li>
            <li>
              <a :href="businessPermitUrl" target="_blank">
                <i class="businessPermit"></i>
                <p>经营许可资质</p>
              </a>
            </li>
            <li :class="{'active':leftPanel === 'aiOfficeAssistant'}">
              <div @click="leftPanel = 'aiOfficeAssistant'" href="javascript:void(0)" class="aiOfficeAssistant-item">
                <i class="aiOfficeAssistant"></i>
                <p>AI助手</p>
              </div>
            </li>
          </ul>
        </div>
        <Consult v-show="leftPanel === 'consult'" :robot="robot" :userAuths="userAuths" :talkSessionId="satisfactionForm.talkSessionId"/>
        <Search v-show="leftPanel === 'search'"/>
        <Approval v-show="leftPanel === 'approval'"/>
        <Preach v-show="leftPanel === 'preach'"/>
        <Serve v-show="leftPanel === 'serve'" :robot="robot"/>
        <AiAssistant v-show="leftPanel === 'aiOfficeAssistant'" :robot="robot"/>
      </div>
    </div>
    <div id="mask" v-show="degreeConfirmStatus">
      <div class="mask">
        <div class="title">
          满意度微调研
          <!-- <span @click="degreeConfirmStatus=false"><img src="../assets/images/icon/icon10.png"/></span> -->
        </div>
        <div class="content">
          <div class="content-user">
            <div class="user"><img src="../assets/images/robot-manbig.png" style="width: 55px" :title="robot.robotName">
              <p>{{ robot.robotName }}</p></div>
            <div class="user-cont">
              <p>您好，请问您对{{ robot.robotName }}的本次服务满意么？</p>
              <input name="radio" v-model="satisfactionForm.type" id="satisf" type="radio" value="1"/>
              <label for="satisf" class="radiobox">
                满意
              </label>
              <input name="radio" v-model="satisfactionForm.type" id="yawp" type="radio" value="0"/>
              <label for="yawp" class="radiobox">
                不满意
              </label>
              <div class="yawp" v-show="satisfactionForm.type==0">
                <p>{{ robot.robotName }}欢迎您提出意见和建议，如您对本次问答中涉及的法律法规想进一步了解的话请您点击
                  <a :href="complianceUrl" target="_blank">法律法规库</a>
                  进行检索。
                </p>
                <textarea v-model="satisfactionForm.queContent" class="yawp-text"></textarea>
              </div>
            </div>
          </div>
          <div class="btn clearfix">
            <button @click="satisfactionClick">提交</button>
          </div>
        </div>
      </div>
    </div>

    <div id="mask_yhjy" v-if="yhyjConfirmStatus">
      <div class="mask">
        <div class="title">
          优化建议
          <span @click="yhyjConfirmStatus=false"><img src="../assets/images/icon/icon10.png"/></span>
        </div>
        <div class="content yhyj">
          <el-form ref="form" :model="yhjy_form" :rules="rules" label-width="80px">
            <el-form-item label="针对问题" prop="question">
              <el-select v-model="yhjy_form.question" placeholder="请选择问题">
                <el-option label="页面" value="页面"></el-option>
                <el-option label="操作" value="操作"></el-option>
                <el-option label="功能" value="功能"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="建议标题" prop="title">
              <el-input v-model="yhjy_form.title"></el-input>
            </el-form-item>
            <el-form-item label="建议描述">
              <el-input type="textarea" v-model="yhjy_form.content" :autosize="{ minRows: 5, maxRows: 5}"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="yhjy_submit">提交</el-button>
              <el-button type="primary" @click="yhyjConfirmStatus=false">取消</el-button>
            </el-form-item>
          </el-form>

        </div>
      </div>
    </div>

    <div class="footer clearfix">Copyright 中国移动浙江公司 版权所有</div>
  </div>
</template>

<script>
import "/src/assets/fonts/iconfont.js";
import "/public/static/js/swiper.min.js";
import API from './api-chat-window'
import Cookie from '../utils/cookie'
import lawaiUtils from '../utils/lawaiUtils'
import Qs from 'qs'
import Consult from './leftPanel/consult'
import Search from './leftPanel/search'
import Approval from './leftPanel/approval'
import Preach from './leftPanel/preach'
import Serve from './leftPanel/serve'
import AiAssistant from './leftPanel/aiAssistant.vue'
import windowConst from "@/utils/const"
export default {
  name: "ChatWindow",
  components: {Consult, Search, Approval, Preach, Serve, AiAssistant},
  data() {
    return {
      // 人员权限
      userAuths: [],
      // 要发送的消息
      msgToSend: "",
      // 满意度窗口
      degreeConfirmStatus: false,
      // 满意度 表单
      satisfactionForm: {
        talkSessionId: null,
        //0不满意，1满意
        type: 1,
        queContent: "",
      },
      yhyjConfirmStatus: false,
      yhjy_form: {},
      robot: {
        robotName: null
      },
      rules: {
        title: [
          {required: true, message: '建议标题不能为空', trigger: 'change'}
        ], question: [
          {required: true, message: '请选择针对问题', trigger: 'change'}
        ],
      },
      leftPanel　: "consult",// 活动的左导航栏
      artificialUrl　: "",// 人工咨询地址
      complianceUrl　: "",// 法律法规地址
      adSearchUrl: "",// 广告智审地址
      policyLibraryUrl: "",// 法律政策库地址
      caseLibraryUrl: "",// 典型案例库地址
      businessPermitUrl:"",//经营许可资质地址
    };
  },
  created() {
    const vue = this;
    vue.satisfactionForm.talkSessionId = lawaiUtils.getUuid();

    window.onbeforeunload = function () {
      if (consult.willShowConfirm) {
        vue.degreeConfirmStatus = true;
        return "";
      }
    }
    this.artificialUrl = windowConst.VUE_APP_ARTIFICIAL_URL;
    this.complianceUrl = windowConst.VUE_APP_COMPLIANCE_URL;
    this.adSearchUrl = windowConst.VUE_APP_AD_SEARCH_URL;
    this.policyLibraryUrl = windowConst.VUE_APP_POLICY_LIBRARY_URL;
    this.caseLibraryUrl = windowConst.VUE_APP_CASE_LIBRARY_URL;
    this.businessPermitUrl = windowConst.VUE_APP_BUSINESS_LICENSE;
  },
  mounted() {
    if (!String.prototype.trim) {
      String.prototype.trim = function () {
        return this.replace(/^[\n\s\uFEFF\xA0]+|[\n\s\uFEFF\xA0]+$/g, '');
      }
    }
    //
    let vue = this;
    let moduleName = this.$route.query.moduleName;
    if (moduleName) {
      this.answerItemClick(moduleName);
    } else {
      API.getRobotInfo({}).then(res => {
        if (res.data) {
          vue.robot = res.data;
          vue.robot.resTime = res.resTime;
        }
      })
    }
    // 人员权限
    API.getUserAuth({}).then(res => {
      if (res.data) {
        vue.userAuths = res.data.reverse();
      }
    })
  },
  beforeCreate: function () {
    document.body.className = "back";
  },
  beforeDestroy() {
    document.body.removeAttribute("class", "back");
  },
  methods: {
    // 满意度提交
    satisfactionClick() {
      const vue = this;
      if (Number(vue.satisfactionForm.type) === 1) {
        this.messageAndCloseWindow();
        return;
      }
      // 意见
      if (vue.satisfactionForm.queContent == null || vue.satisfactionForm.queContent.trim().length === 0) {
        vue.msgToSend = ""
        this.$message.error("反馈意见不能为空");
        return;
      } else if (vue.satisfactionForm.queContent.trim().length > 400) {
        this.$message.error("反馈意见的内容不能超过400个字符");
        return;
      }
      API.addSatisfaction(Qs.stringify(vue.satisfactionForm))
          .then(res => {
                if (res.result) {
                  this.messageAndCloseWindow();
                } else {
                  this.$message.error(res.message);
                }
              }
          )
    },
    messageAndCloseWindow(){
      this.$message.success("提交成功");
      this.degreeConfirmStatus = false
      consult.willShowConfirm = false;//2020-08-02 shenyi 提交时关闭窗口不需要再有对话框
      this.closeWindow();
    },
    clickClose() {
      let vue = this;
      if (consult.willShowConfirm) {
        vue.degreeConfirmStatus = true;
      } else {
        this.closeWindow();
      }
    },
    closeWindow() {
      if (IEVersion() != 15) {
        window.close()
      } else {
        window.opener = null;
        window.open(' ', '_self');
        window.close()
      }
    },
    hideEmotionBox() {//2020-07-24 shenyi add 点击其它位置隐藏表情包
      consult.hideEmotionBox();
    },
    yhjy_open() {//2020-08-26
      this.yhyjConfirmStatus = true;
    },
    yhjy_submit() {//2020-08-26

      if (!this.yhjy_form.question) {
        this.$message.error('请选择针对问题');
        return
      }
      var title = this.yhjy_form.title || "";
      if (title == "") {
        this.$message.error('建议标题不能为空');
        return
      }
      if (title.length > 50) {
        this.$message.error('建议标题不能超过50个字');
        return
      }
      var content = this.yhjy_form.content || "";
      let l = content.length;
      if (l > 500) {
        this.$message.error('建议描述的内容不能超过500个字符');
        return
      }
      API.addOptimizeAdvise(Qs.stringify(this.yhjy_form)).then(res => {
        this.$message.success("提交成功");
        this.yhjy_form = {};
        this.yhyjConfirmStatus = false;
      })
    }
  }
};
</script>

<style scoped lang="less">
@import "@/assets/css/index.less";
.aiOfficeAssistant-item {
  .flex-display( @direction: column, @justify: center, @align: center);
  .aiOfficeAssistant {
    text-align: center;
    width: 40px;
    display: block;
    background: url('~@/assets/images/aiOfficeAssistant.png') no-repeat center center / cover;;
    height: 31px;
  }
}
</style>